<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body bgcolor="#EEEEEE" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
	<div id="insertTable_main" xlvobject="xlv.obj.pane" xlvprop="{bkOpacity:false,glow:{enable:true},border:{enable:true}}" style="background:#EEEEEE;">
		<style type="text/css">
			#insertTable_main,
			#insertTable_main td * select,
			#insertTable_main *{
				font-family: arial, verdana, helvetica;
				font-size: 11px;
			}
			#insertTable_main td{
				white-space: nowrap;
				padding:2px 2px;
			}
			#insertTable_main td input{
				width: 60px;
			}
		</style>
	
		<div xlvobject="xlv.obj.dm" xlvprop="{name:'dm.inserttable',globe:false}"
			xlvmethod="{
				initial:function(){
					var main=xlv.util.findParent(this,{id:'insertTable_main'});
					this.$P.initialJSONData=main.$P.caller;
					this.$self('initial');
				}
			}"
		>
		</div>
		
		<span style="font-weight: bold;font-size:13px;margin:4px 6px;">Table Properties:</span>
		<table border="0" cellpadding="0" cellspacing="0" style="margin:8px;">
			<tr>
				<td>Rows:</td>
				<td ><div xlvobject="xlv.obj.input" xlvprop="{dmName:'dm.inserttable',dmPath:'rows'}" style=""></div></td>
				<td>Width:</td>
				<td>
					<div xlvobject="xlv.obj.input" xlvprop="{dmName:'dm.inserttable',dmPath:'width'}"  style="display:inline;width:40px"></div>
					<div xlvobject="xlv.obj.select" xlvprop="{dmName:'dm.inserttable',dmPath:'widthUnit'}" style="display:inline;width:20px"> 
						<select>
							<option value="%">%</option>
							<option value="px">px</option>
						</select>
					</div>
					
				</td>
			</tr>
			<tr>
				<td>Cols:</td>
				<td><div xlvobject="xlv.obj.input" xlvprop="{dmName:'dm.inserttable',dmPath:'cols'}"></div></td>
				<td>Alignment:</td>
				<td><div xlvobject="xlv.obj.select" xlvprop="{dmName:'dm.inserttable',dmPath:'alignment'}" >
						<select style="width:100%">
							<option value="">Not Set</option>
							<option value="left">Left</option>
							<option value="right">Right</option>
							<option value="center">Center</option>
						</select>
					</div>
				</td>
			</tr>
			<tr>
				<td>Padding:</td>
				<td><div xlvobject="xlv.obj.input" xlvprop="{dmName:'dm.inserttable',dmPath:'padding'}"></div></td>
				<td>Background-Color:</td>
				<td><div xlvobject="xlv.obj.input" xlvprop="{dmName:'dm.inserttable',dmPath:'bkColor'}" style="display:inline;width:40px;"></div>
					<button style="display:inline">Choose</button>
				</td>
			</tr>
			<tr>
			 	<td>Border-Size:</td>
				<td><div xlvobject="xlv.obj.input" xlvprop="{dmName:'dm.inserttable',dmPath:'border'}"></div></td>
				<td>Border-Color:</td>
				<td><div xlvobject="xlv.obj.input" xlvprop="{dmName:'dm.inserttable',dmPath:'borderColor'}" style="display:inline;width:40px;"></div>
					<button style="display:inline">Choose</button>
				</td>
			</tr>
			<tr>
				<td>Border-Style:</td>
				<td><div xlvobject="xlv.obj.select" xlvprop="{dmName:'dm.inserttable',dmPath:'borderStyle'}" >
						<select>
							<option value="none">none</option>
							<option value="solid">solid</option>
							<option value="double">double</option>
							<option value="dotted">dotted</option>
							<option value="dashed">dashed</option>
							<option value="groove">groove</option>
							<option value="ridge">ridge</option>
							<option value="inset">inset</option>
							<option value="outset">outset</option>
						</select>
					</div>
				</td>
				<td>Border-Collapse:</td>
				<td><div xlvobject="xlv.obj.checkbox" xlvprop="{text:'Collapse',dmName:'dm.inserttable',dmPath:'borderCollapse',valueForChecked:'collapse',valueForUnchecked:'separate'}">
						<input type="checkbox" style="width:20px"></input>collapse
					</div>
				</td>
			</tr>
		</table>	
		<div align="right" style="margin-right:8px">
			<button id="apply" xlvobject="xlv.obj.process" xlvprop="{title:'Apply'}" style="font-size: 12px;" 
				xlvmethod="{
					process:function(options){
						var main=xlv.util.findParent(this,{id:'insertTable_main'});
						var dm=this.getDataModel('dm.inserttable');
						main.$P.caller.rows=dm.getValue('rows');
						main.$P.caller.cols=dm.getValue('cols');
						main.$P.caller.padding=dm.getValue('padding');
						main.$P.caller.borderWidth=dm.getValue('borderWidth');
						main.$P.caller.borderStyle=dm.getValue('borderStyle');
						main.$P.caller.width=dm.getValue('width');
						main.$P.caller.widthUnit=dm.getValue('widthUnit');
						main.$P.caller.alignment=dm.getValue('alignment');
						main.$P.caller.bkColor=dm.getValue('bkColor');
						main.$P.caller.borderColor=dm.getValue('borderColor');
						main.$P.caller.borderCollapse=dm.getValue('borderCollapse');
						main.$P.caller.commit=true;
						main.dispose();
					}
				}"
			>
			</button>
			<button id="cancel" xlvobject="xlv.obj.process" xlvprop="{title:'Cancel'}" style="font-size: 12px;" 
				xlvmethod="{
					process:function(options){
						var main=xlv.util.findParent(this,{id:'insertTable_main'});
						main.dispose();
					}
				}"
			>
			</button>
		</div>
	</div>
	</body>
</html>